<template>
  <vue-scroll :ops="ops">
    <div class="chart-container">
      <div class="" style="display:flex">
        <!-- <div class="connect">
          <el-form :model="paramForm" ref="paramForm" label-width="100px" class="demo-ruleForm" label-position="top">
            <el-form-item label="设备标识位" prop="type">
              <el-input v-model="paramForm.command.DI" :placeholder="'请输入内容'" style="width: 100%;" class="filter-item"
                @keyup.enter.native="handleFilter" />
            </el-form-item>
            <el-form-item label="站台号" prop="type">
              <el-input v-model=paramForm.command.QZ :placeholder="'请输入内容'" style="width: 100%;" class="filter-item"
                @keyup.enter.native="handleFilter" />
            </el-form-item>
            <el-form-item label="设备ID" prop="type">
              <el-input v-model=paramForm.command.ID :placeholder="'请输入内容'" style="width: 100%;" class="filter-item"
                @keyup.enter.native="handleFilter" />
            </el-form-item>
            <el-form-item label="SN" prop="type">
              <el-input v-model=paramForm.command.SN :placeholder="'请输入内容'" style="width: 100%;" class="filter-item"
                @keyup.enter.native="handleFilter" />
            </el-form-item>
            <el-form-item label="通讯参数" prop="type">
              <el-input v-model=paramForm.command.SETNET :placeholder="'请输入内容'" style="width: 100%;" class="filter-item"
                @keyup.enter.native="handleFilter" />
            </el-form-item>
            <el-form-item label="AFC开关" prop="type">
              <el-select v-model=paramForm.command.SWITCHAFC style="width: 100%;" placeholder="请选择停止位">
                <el-option label="是" value="1"></el-option>
                <el-option label="否" value="0"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="扫频开关" prop="type">
              <el-select v-model=paramForm.command.SWITCHSCAN style="width: 100%;" placeholder="请选择停止位">
                <el-option label="是" value="1"></el-option>
                <el-option label="否" value="0"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="扫描分辨率" prop="type">
              <el-input v-model=paramForm.command.BANDWIDTH :placeholder="'请输入内容'" style="width: 100%;"
                class="filter-item" @keyup.enter.native="handleFilter" />
            </el-form-item>
            <el-form-item label="探空仪空口速率" prop="type">
              <el-input v-model=paramForm.command.RADIO_BAUD :placeholder="'请输入内容'" style="width: 100%;"
                class="filter-item" @keyup.enter.native="handleFilter" />
            </el-form-item>
            <el-form-item label="纬度" prop="type">
              <el-input v-model=paramForm.command.LAT :placeholder="'请输入内容'" style="width: 100%;" class="filter-item"
                @keyup.enter.native="handleFilter" />
            </el-form-item>
            <el-form-item label="经度" prop="type">
              <el-input v-model=paramForm.command.LONG :placeholder="'请输入内容'" style="width: 100%;" class="filter-item"
                @keyup.enter.native="handleFilter" />
            </el-form-item>
            <el-form-item label="海拔高度" prop="type">
              <el-input v-model=paramForm.command.ALT :placeholder="'请输入内容'" style="width: 100%;" class="filter-item"
                @keyup.enter.native="handleFilter" />
            </el-form-item>
            <el-form-item label="工作频点" prop="type">
              <el-input v-model=paramForm.command.FREQ :placeholder="'请输入内容'" style="width: 100%;" class="filter-item"
                @keyup.enter.native="handleFilter" />
            </el-form-item>

          </el-form>
        </div> -->
        <div class="connect">
          <el-form :model="paramForm" ref="paramForm" label-width="100px" class="demo-ruleForm" label-position="top">
            <el-form-item label="设备标识位" prop="type">
              <el-input v-model="paramForm.command.DI" :placeholder="'请输入内容'" style="width: 100%;" class="filter-item"
                @keyup.enter.native="handleFilter" />
            </el-form-item>
            <el-form-item label="站台号" prop="type">
              <el-input v-model=paramForm.command.QZ :placeholder="'请输入内容'" style="width: 100%;" class="filter-item"
                @keyup.enter.native="handleFilter" />
            </el-form-item>
            <el-form-item label="设备ID" prop="type">
              <el-input v-model=paramForm.command.ID :placeholder="'请输入内容'" style="width: 100%;" class="filter-item"
                @keyup.enter.native="handleFilter" />
            </el-form-item>
            <el-form-item label="SN" prop="type">
              <el-input v-model=paramForm.command.SN :placeholder="'请输入内容'" style="width: 100%;" class="filter-item"
                @keyup.enter.native="handleFilter" />
            </el-form-item>
            <el-form-item label="通讯参数" prop="type">
              <el-input v-model=paramForm.command.SETNET :placeholder="'请输入内容'" style="width: 100%;" class="filter-item"
                @keyup.enter.native="handleFilter" />
            </el-form-item>
            <el-form-item label="AFC开关" prop="type">
              <el-select v-model=paramForm.command.SWITCHAFC style="width: 100%;" placeholder="请选择停止位">
                <el-option label="是" value="1"></el-option>
                <el-option label="否" value="0"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="扫频开关" prop="type">
              <el-select v-model=paramForm.command.SWITCHSCAN style="width: 100%;" placeholder="请选择停止位">
                <el-option label="是" value="1"></el-option>
                <el-option label="否" value="0"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="扫描分辨率" prop="type">
              <el-input v-model=paramForm.command.BANDWIDTH :placeholder="'请输入内容'" style="width: 100%;"
                class="filter-item" @keyup.enter.native="handleFilter" />
            </el-form-item>
            <el-form-item label="探空仪空口速率" prop="type">
              <el-input v-model=paramForm.command.RADIO_BAUD :placeholder="'请输入内容'" style="width: 100%;"
                class="filter-item" @keyup.enter.native="handleFilter" />
            </el-form-item>
            <el-form-item label="纬度" prop="type">
              <el-input v-model=paramForm.command.LAT :placeholder="'请输入内容'" style="width: 100%;" class="filter-item"
                @keyup.enter.native="handleFilter" />
            </el-form-item>
            <el-form-item label="经度" prop="type">
              <el-input v-model=paramForm.command.LONG :placeholder="'请输入内容'" style="width: 100%;" class="filter-item"
                @keyup.enter.native="handleFilter" />
            </el-form-item>
            <el-form-item label="海拔高度" prop="type">
              <el-input v-model=paramForm.command.ALT :placeholder="'请输入内容'" style="width: 100%;" class="filter-item"
                @keyup.enter.native="handleFilter" />
            </el-form-item>
            <el-form-item label="工作频点" prop="type">
              <el-input v-model=paramForm.command.FREQ :placeholder="'请输入内容'" style="width: 100%;" class="filter-item"
                @keyup.enter.native="handleFilter" />
            </el-form-item>
          </el-form>

        </div>
      </div>
      <el-tabs v-model="activeName" style="margin-top:15px;" type="border-card">
        <el-tab-pane v-for="item in tabMapOptions" :key="item.key" :label="item.label" :name="item.key">
          <keep-alive>
            <tab-pane v-if="activeName == item.key" :type="item.key" @create="showCreatedTimes" />
          </keep-alive>
        </el-tab-pane>
      </el-tabs>

      <div class="flex">
        <el-button type="primary" @click="readForm()">读取配置</el-button>
        <el-button type="success" @click="submit()">保存配置</el-button>
      </div>
    </div>

    <!-- {{ busiParamMessage }} -->
  </vue-scroll>
</template>

<script>
import { readParam, updateParam, loadData } from '@/api/param';
import TabPane from './components/TabPane'
export default {
  name: 'LineChart',


  data() {
    return {
      listLoading: true,
      paramForm: {
        command: {
          DI: '',
          QZ: '',
          ID: '',
          SN: '',
          SETNET: '',
          SWITCHAFC: '',
          BANDWIDTH: '',
          RADIO_BAUD: '',
          LAT: '',
          LONG: '',
          ALT: '',
          FREQ: ''
        },
        coverter: {

        }
      },

    };
  },
  mounted() {
    this.load();
  },
  methods: {
    async readForm() {
      // alert('读取')
      const paramBody = { "device": "GTCZ1", "target": "YSRP", "command": "SS,YSRP,001", "transtype": "1003" };
      const result = await readParam(paramBody)
      console.log(result)
      // this.paramForm = result.data
      //结果由前端的websocket接收
    },
    async updateParam() {
      // alert('保存')
      const paramBody = { "device": "GTCZ1", "target": "YSRP", "command": "SN,YSRP,001,G11160000690123456701201605200000000", "transtype": "1003" };
      const result = await updateParam(paramBody)
      console.log(result)
      // this.paramForm = result.data
      //结果由前端的websocket接收
    },
    async load() {
      // alert('保存')
      this.listLoading = true
      try {
        const result = await loadData()
        console.log(result)
        this.paramForm = result.data
      } catch (error) {
        this.listLoading = false
      }
      //结果由前端的websocket接收
      setTimeout(() => {
        this.listLoading = false
      }, 1 * 1000)
    }
  },
  computed: {
    busiParamMessage() {
      return this.$store.getters.busiParamMessage
    }
  },
  watch: {
    busiParamMessage: function (newValue, oldValue) {
      // 当state的值变化时，这个函数会被调用
      console.log('The new state is: ' + newValue);
      // 你可以在这里根据新的state值进行相应的操作

      //请求网络数据 刷新页面
      // this.$store.dispatch('zuWang/setZuwangFromJS', '1')
      this.load()
    }
  }
}
</script>

<style scoped>
.chart-container {
  /* position: relative; */
  width: 100%;
  height: calc(100vh - 152px);
  padding: 20px 20px 20px 20px;
  background-color: #ffffff;
  font-family: SourceHanSansSC-regular;
  font-size: 16px;
}

.trafficChart {
  width: 100%;
  height: 288px;
  /* background-color: #cccccc; */
}

.connect {
  width: 50%;
  height: calc(100% - 300px);
  padding: 0px 20px 20px 20px;
  /* overflow: auto; */
}

::v-deep .el-form-item--small.el-form-item {
  margin-bottom: 18px;
}

::v-deep .el-form-item--small .el-form-item__label {
  line-height: 20px;
}

.flex {
  display: flex;
  justify-content: center;
  /* height: 152px */
}
</style>